<script setup name="Inform">
	import {ref} from 'vue'
	import {
		Edit,
		Close,
		Loading,
		StarFilled,
	} from '@element-plus/icons-vue'
	import {ElMessage, ElMessageBox} from "element-plus";
	import {noticeApi} from "@/api/notice.js";
	
	import {useUserInfoStore} from '@/store/userInfo.js'
	
	const userInfoStore = useUserInfoStore();
	let loginUser = userInfoStore.user.role
	
	//表格数据
	let noticeList = ref([])
	const total = ref(0)
	
	const loadData = () => {
		noticeApi.inform().then(result => {
			noticeList.value = result.data
		})
		noticeApi.informTotal().then(result => {
			total.value = result.data
		})
	}
	
	loadData()
	
	const loading = ref(true)
	const notice = ref({})
	const dialogDetailsVisible = ref(false)
	//详情
	const handleClick = (id) => {
		noticeApi.selectById(id).then(result => {
			console.log(result.data)
			dialogDetailsVisible.value = true
			notice.value = result.data
		})
	}
	
	//确认收到
	import {useRouter} from 'vue-router'
	const router = useRouter()
	const receive = (id) => {
		ElMessageBox.confirm(
			'确认收到通知吗?',
			'警告',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				lockScroll: false   //锁定滚动条。防止抖动
			}
		)
			//点击确认
			.then(() => {
				noticeApi.receive(notice.value).then(result => {
					if (result.code === 0) {
						ElMessage.success(result.msg)
						dialogDetailsVisible.value = false
						setLoading()
						globalMethod()
						// router.push('/')
					} else {
						ElMessage.error(result.msg)
					}
				})
			})
	}
	
	//点击刷新
	const setLoading = () => {
		loading.value = true
		setTimeout(() => {
			loading.value = false
		}, 1000)
		loadData()
	}
	setLoading()
	

</script>

<template>
	<div class="back">
		<el-card class="">
			<el-space style="width: 100%" fill>
				<div>
					<el-button :icon="Loading" type="success" @click="setLoading">点击刷新</el-button>
				</div>
				<el-skeleton style="display: flex; gap: 8px" :loading="loading" animated :count="4" rows="3">
					<template #template>
						<div style="flex: 1">
							<el-skeleton-item variant="image" style="height: 240px"/>
							<div style="padding: 14px">
								<el-skeleton-item variant="h3" style="width: 50%"/>
								<div style="display: flex; align-items: center; margin-top: 16px; height: 16px;">
									<el-skeleton-item variant="text" style="margin-right: 16px"/>
									<el-skeleton-item variant="text" style="width: 30%"/>
								</div>
							</div>
						</div>
					</template>
					<template #default>
						<el-card
							style="width: 300px;background-color: #f0f9eb"
							v-for="item in noticeList"
							:key="item.name"
							:value="item.id"
							:body-style="{ padding: '0px', marginBottom: '1px' }"
							shadow="hover"
							
						>
							<div class="image multi-content" style="max-width: 100%;height: 100px"
								 ><el-text line-clamp="2" v-html="item.content"></el-text></div>
							<el-divider>
								<el-icon>
									<star-filled/>
								</el-icon>
							</el-divider>
							<div style="padding: 14px">
								<span style="font-size: 20px">{{ item.name }}</span>
								<el-divider content-position="left">公告时间</el-divider>
								<div class="bottom card-header">
									<div class="time grid-content ep-bg-purple">{{ item.createTime }}</div>
									<el-divider/>
									<el-button type="success" plain @click="handleClick(item.id)">查看详情</el-button>
								</div>
							</div>
						</el-card>
					</template>
				</el-skeleton>
			</el-space>
		</el-card>
	</div>
	
	
	<!--详情-->
	<el-dialog v-model="dialogDetailsVisible" title="公告详情" style="width: 70%;font-size:16px" :lock-scroll="false">
		<el-descriptions border style="font-size:32px" :data="notice">
			<el-descriptions-item label="公告标题" style="font-size: 20px" align="center">{{
					notice.name
				}}
			</el-descriptions-item>
			<el-descriptions-item label="发布人员" align="center">{{ notice.adminName }}</el-descriptions-item>
			<el-descriptions-item label="发布时间" align="center">{{ notice.createTime }}</el-descriptions-item>
			<el-descriptions-item label="公告内容" align="center" :span="3">
				<div v-html="notice.content"></div>
			</el-descriptions-item>
			<el-descriptions-item label="操作" align="center" :span="3">
				<el-button type="success" :icon="Edit" round @click="receive">确认收到</el-button>
				<el-button type="primary" :icon="Close" round @click="dialogDetailsVisible = false">关闭</el-button>
			</el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<style scoped>

</style>